body {
  font-family: microsoft yahei, Helvetica Neue, Helvetica, STHeiTi, sans-serif;
  -webkit-user-select: none;
  line-height: 1.5;
  font-size: .28rem;
  color: #2b2b2b;
  background: #f8fafc;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

input,
textarea {
  -webkit-appearance: none;
  border: none;
  outline: none;
  font: inherit
}

textarea {
  resize: none
}

button {
  border: none;
  background: transparent;
  outline: none;
  font: inherit
}

ol,
p,
ul {
  margin: 0
}

ol,
ul {
  padding: 0
}

li {
  display: block
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit
}

a {
  color: inherit;
  text-decoration: inherit
}

::-webkit-search-cancel-button,
::-webkit-search-results-button {
  -webkit-appearance: none
}

:focus::-webkit-input-placeholder,
:focus::placeholder {
  opacity: .8
}

.error-box,
.loading-box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #999;
  text-align: center;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center
}

.loading-wrap {
  font-size: 14px
}

.loads {
  width: 24px;
  height: 24px;
  padding: 8px;
  -webkit-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite;
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle
}

.cls-default {
  fill: #39f;
  fill-rule: evenodd
}

.error-box {
  display: none
}

.error-wrap {
  font-size: 15px
}

.error-wrap img {
  width: 105px;
  height: 105px;
  margin: 16px auto 16px
}

.error-wrap .err-p2 {
  margin-top: 12px;
  color: #39f
}

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.yux-toast {
  display: none;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  max-width: 5rem;
  margin: auto;
  z-index: 3000;
  text-align: center
}

.yux-toast-active {
  display: block
}

.yux-toast-active span,
.yux-toast span {
  display: inline-block;
  word-break: break-all;
  color: #fff;
  font-size: .28rem;
  padding: .2rem .5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, .6)
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

a {
  background-color: transparent
}

img {
  border-style: none
}

b,
strong {
  font-weight: bolder
}

[hidden],
template {
  display: none
}

button,
input,
optgroup,
select,
textarea {
  margin: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

.progress {
  position: fixed;
  top: 1.2rem;
  left: 0;
  width: 100%;
  height: .44rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center
}

body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #060f12
}

#app {
  padding: 1.2rem 0 0;
  height: 100%;
  box-sizing: border-box;
  background: #060f12 url(../static/mbg.0d9c6ec3.jpg) no-repeat 0 -1.06rem;
  background-size: 7.5rem auto;
  background-origin: content-box
}

#app .downPcApp {
  width: 1200px;
  position: fixed;
  left: 50%;
  margin-left: -600px;
  top: 60px;
  display: none;
  z-index: 999
}

#app .downPcApp .btn {
  width: 160px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  text-align: center;
  display: block;
  margin-left: 32px;
  border-radius: 24px;
  color: #fff;
  float: right;
  background: linear-gradient(270deg, #40b9ff, #39f);
  position: relative
}

#app .downPcApp .btn .animateQRCodeIn {
  padding: 5px;
  width: 120px;
  height: 120px;
  position: absolute;
  left: 15px;
  top: 60px;
  border-radius: 8px;
  border: 1px solid #d8d8d8;
  -webkit-animation: animateQRCodeIn .6s;
  animation: animateQRCodeIn .6s
}

#app .downPcApp .btn .animateQRCodeIn img {
  width: 120px;
  height: 120px
}

#app .downPcApp .pcLogo {
  width: "277px";
  height: "60px";
  background: url(../static/pc-logo.21ea0fbb.png) no-repeat;
  background-size: 100% auto;
  float: left;
  display: block
}

#app .downAndGoApp {
  width: 7.5rem;
  height: 1.2rem;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  box-flex: 1;
  display: flex;
  align-items: center;
  font-size: .28rem
}

#app .downAndGoApp .logo {
  display: block;
  width: .8rem;
  height: .8rem;
  background: url() no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: .2rem;
  left: .32rem
}

#app .downAndGoApp .goAppBtn {
  width: 1.76rem;
  height: .6rem;
  line-height: .6rem;
  text-align: center;
  display: block;
  border-radius: .6rem;
  color: #fff;
  position: absolute;
  top: .3rem;
  right: .32rem;
  z-index: 99;
  background: linear-gradient(270deg, #40b9ff, #39f)
}

#app .downAndGoApp .firstScreen {
  padding-left: 1.24rem;
  color: #fff
}

#app .downAndGoApp .firstScreen h5 {
  font-size: .32rem;
  line-height: 1;
  font-weight: 400;
  padding-bottom: .12rem;
  width: 7.5rem
}

#app .downAndGoApp .firstScreen p {
  line-height: 1;
  width: 7.5rem;
  font-size: .24rem
}

#app .bottom {
  display: none;
  position: absolute;
  width: 100%;
  z-index: 2;
  bottom: .4rem;
  text-align: center;
  font-size: .24rem
}

#app .bottom .msg {
  margin: 0 0 .4rem;
  line-height: 1.8;
  color: #a1aab3
}

#app .bottom .blue {
  color: #0bafff
}

@-webkit-keyframes animateQRCodeIn {
  0% {
    transform: translateY(-10px);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes animateQRCodeIn {
  0% {
    transform: translateY(-10px);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

.swipers {
  width: 100%;
  height: 100%;
  position: relative
}

.swipers .swiper-button-disabled,
.swipers .swiper-button-next,
.swipers .swiper-button-prev {
  display: none
}

.swipers .swiper-container {
  height: 100%
}

.swipers .swiper-container .swiper-wrapper .swiper-slide {
  position: relative
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent {
  width: 100%;
  height: 7.12rem;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img {
  position: absolute;
  -webkit-animation: hide 2s linear 0s both;
  animation: hide 2s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:first-child {
  width: 2.24rem;
  height: 4rem;
  left: 1.06rem;
  top: 1.6rem;
  z-index: 9
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(2) {
  width: 2.28rem;
  height: 4.07rem;
  left: 1.69rem;
  top: 1.57rem;
  z-index: 99
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(3) {
  width: 2.4rem;
  height: 4.24rem;
  left: 2.56rem;
  top: 1.44rem;
  z-index: 999
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(4) {
  width: 2.28rem;
  height: 4.07rem;
  right: 1.69rem;
  top: 1.57rem;
  z-index: 99
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(5) {
  width: 2.24rem;
  height: 4rem;
  right: 1.06rem;
  top: 1.6rem;
  z-index: 9
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle {
  text-align: center;
  opacity: 0;
  -webkit-animation: hide 1s linear 0s both;
  animation: hide 1s linear 0s both;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .3);
  text-rendering: geometricPrecision
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle h2 {
  line-height: 1;
  font-size: .44rem;
  font-weight: 700;
  padding-bottom: .2rem
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle p {
  color: #a1aab3;
  font-size: .3rem
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .intro {
  position: absolute;
  width: 4.78rem;
  height: 1.02rem;
  background: url(../static/intro.5b9669f4.png) no-repeat;
  background-size: 100% auto;
  left: 1.36rem;
  top: 2.4rem
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .downBtn {
  position: absolute;
  left: 2.56rem;
  top: 4.36rem;
  width: 3rem;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  display: block;
  border-radius: .8rem;
  background: #39f;
  color: #fff;
  z-index: 99;
  font-size: .36rem
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sorts {
  position: absolute;
  width: 2rem;
  height: 2.84rem;
  -webkit-animation: hide 1s linear 0s both;
  animation: hide 1s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sorts img {
  width: 100%;
  display: block
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort3 {
  left: 2.88rem;
  top: 2.58rem;
  -webkit-animation: hide 2s linear 0s both;
  animation: hide 2s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort2 {
  left: 1.66rem;
  top: 2.12rem;
  -webkit-animation: hide 2s linear 0s both;
  animation: hide 2s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort1 {
  right: 1.66rem;
  top: 1.48rem;
  -webkit-animation: hide 2s linear 0s both;
  animation: hide 2s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .frees {
  position: absolute;
  -webkit-animation: hideo 2s linear 0s both;
  animation: hideo 2s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .frees img {
  width: 2.04rem;
  height: 1.46rem;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-animation: hide 2s linear 0s both;
  animation: hide 2s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free1 {
  width: 2.9rem;
  height: 1.8rem;
  background: url() no-repeat;
  background-size: 100% auto;
  left: .76rem;
  top: 1.54rem
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free2 {
  width: 2.9rem;
  height: 1.8rem;
  background: url() no-repeat;
  background-size: 100% auto;
  right: .76rem;
  top: 1.54rem
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free3 {
  width: 2.9rem;
  height: 1.8rem;
  background: url() no-repeat;
  background-size: 100% auto;
  left: .76rem;
  top: 3.64rem
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free4 {
  width: 2.9rem;
  height: 1.8rem;
  background: url() no-repeat;
  background-size: 100% auto;
  right: .76rem;
  top: 3.64rem
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talks {
  position: absolute;
  -webkit-animation: hide 2s linear 0s both;
  animation: hide 2s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talks img {
  width: 100%;
  display: block
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk1 {
  width: 4.48rem;
  height: .88rem;
  left: 1.88rem;
  top: 1.58rem;
  -webkit-animation: hideRight 1s linear 0s both;
  animation: hideRight 1s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk2 {
  width: 5rem;
  height: .96rem;
  left: .76rem;
  top: 2.32rem;
  -webkit-animation: hide 1s linear 0s both;
  animation: hide 1s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk3 {
  width: 5.04rem;
  height: .96rem;
  left: 1.66rem;
  top: 3.06rem;
  -webkit-animation: hideRight 1s linear 0s both;
  animation: hideRight 1s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk4 {
  width: 3.92rem;
  height: .64rem;
  right: .54rem;
  top: 3.94rem;
  -webkit-animation: hide 1s linear 0s both;
  animation: hide 1s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk5 {
  width: 3.6rem;
  height: .64rem;
  left: .56rem;
  top: 4.77rem;
  -webkit-animation: hideRight 1s linear 0s both;
  animation: hideRight 1s linear 0s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book {
  position: absolute;
  width: 2.18rem;
  height: 2.9rem;
  left: 50%;
  top: 1.6rem;
  margin-left: -1.09rem;
  border-radius: .06rem;
  transform-origin: center 3.6rem;
  transform: rotate(0deg);
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .08), -1px 0 0 0 rgba(0, 0, 0, .08), 1px 0 0 0 rgba(0, 0, 0, .08), 0 1px 0 0 rgba(0, 0, 0, .08)
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book img {
  width: 2.16rem;
  height: 2.88rem;
  display: block;
  border-radius: .06rem;
  box-shadow: .04rem .04rem .2rem #000
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book .bookshadow {
  position: absolute;
  top: -.06rem;
  left: 0;
  width: 2.32rem;
  height: 3.02rem;
  background: url() no-repeat;
  background-size: 100% auto;
  z-index: 999
}

.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .trans1,
.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .trans2,
.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .trans3,
.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .trans4,
.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .trans5,
.swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .trans6 {
  transform: rotate(0deg);
  opacity: 0
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .frees {
  -webkit-animation: showo 1s linear .6s both;
  animation: showo 1s linear .6s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .frees img {
  -webkit-animation: show .5s linear .6s both;
  animation: show .5s linear .6s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .talk1,
.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .talk3,
.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .talk5 {
  -webkit-animation: show .6s linear .5s both;
  animation: show .6s linear .5s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .talk2,
.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .talk4 {
  -webkit-animation: showRight .6s linear .5s both;
  animation: showRight .6s linear .5s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .sort1,
.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .sort2,
.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .sort3 {
  -webkit-animation: scales .3s linear .3s both;
  animation: scales .3s linear .3s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .tabTitle {
  -webkit-animation: show .6s linear .3s both;
  animation: show .6s linear .3s both
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .trans1 {
  -webkit-animation: trans1 .5s linear .3s both;
  animation: trans1 .5s linear .3s both;
  z-index: 6
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .trans2 {
  -webkit-animation: trans2 .3s linear .3s both;
  animation: trans2 .3s linear .3s both;
  z-index: 5
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .trans3 {
  -webkit-animation: trans3 .1s linear .3s both;
  animation: trans3 .1s linear .3s both;
  z-index: 4
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .trans4 {
  -webkit-animation: trans4 .1s linear .3s both;
  animation: trans4 .1s linear .3s both;
  z-index: 3
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .trans5 {
  -webkit-animation: trans5 .3s linear .3s both;
  animation: trans5 .3s linear .3s both;
  z-index: 2
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .trans6 {
  -webkit-animation: trans6 .5s linear .3s both;
  animation: trans6 .5s linear .3s both;
  z-index: 1
}

.swipers .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .readBook img {
  -webkit-animation: scales .3s linear .7s both;
  animation: scales .3s linear .7s both
}

@-webkit-keyframes scales {
  0% {
    transform: scale(.7);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes scales {
  0% {
    transform: scale(.7);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@-webkit-keyframes trans1 {
  to {
    opacity: 1;
    transform: rotate(-50deg)
  }
}

@keyframes trans1 {
  to {
    opacity: 1;
    transform: rotate(-50deg)
  }
}

@-webkit-keyframes trans2 {
  to {
    opacity: 1;
    transform: rotate(-30deg)
  }
}

@keyframes trans2 {
  to {
    opacity: 1;
    transform: rotate(-30deg)
  }
}

@-webkit-keyframes trans3 {
  to {
    opacity: 1;
    transform: rotate(-10deg)
  }
}

@keyframes trans3 {
  to {
    opacity: 1;
    transform: rotate(-10deg)
  }
}

@-webkit-keyframes trans4 {
  to {
    opacity: 1;
    transform: rotate(10deg)
  }
}

@keyframes trans4 {
  to {
    opacity: 1;
    transform: rotate(10deg)
  }
}

@-webkit-keyframes trans5 {
  to {
    opacity: 1;
    transform: rotate(30deg)
  }
}

@keyframes trans5 {
  to {
    opacity: 1;
    transform: rotate(30deg)
  }
}

@-webkit-keyframes trans6 {
  to {
    opacity: 1;
    transform: rotate(50deg)
  }
}

@keyframes trans6 {
  to {
    opacity: 1;
    transform: rotate(50deg)
  }
}

@-webkit-keyframes show {
  0% {
    opacity: 0;
    transform: translateX(1rem)
  }

  to {
    opacity: 1
  }
}

@keyframes show {
  0% {
    opacity: 0;
    transform: translateX(1rem)
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes showRight {
  0% {
    opacity: 0;
    transform: translateX(-1rem)
  }

  to {
    opacity: 1
  }
}

@keyframes showRight {
  0% {
    opacity: 0;
    transform: translateX(-1rem)
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes hide {
  0% {
    opacity: 1
  }

  20% {
    opacity: 0;
    transform: translateX(-1rem)
  }
}

@keyframes hide {
  0% {
    opacity: 1
  }

  20% {
    opacity: 0;
    transform: translateX(-1rem)
  }
}

@-webkit-keyframes hideRight {
  0% {
    opacity: 1
  }

  20% {
    opacity: 0;
    transform: translateX(1rem)
  }
}

@keyframes hideRight {
  0% {
    opacity: 1
  }

  20% {
    opacity: 0;
    transform: translateX(1rem)
  }
}

@-webkit-keyframes showo {
  0% {
    opacity: 0
  }

  20% {
    opacity: 1
  }
}

@keyframes showo {
  0% {
    opacity: 0
  }

  20% {
    opacity: 1
  }
}

@-webkit-keyframes hideo {
  0% {
    opacity: 1
  }

  20% {
    opacity: 0
  }
}

@keyframes hideo {
  0% {
    opacity: 1
  }

  20% {
    opacity: 0
  }
}

.swiper-pagination {
  position: absolute;
  bottom: .56rem;
  left: 0;
  height: .4rem;
  text-align: center
}

.swiper-pagination .swiper-pagination-bullet {
  width: .12rem;
  height: .12rem;
  opacity: .6;
  background: #fff;
  border-radius: .06rem
}

.swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #39f;
  width: .24rem
}

@media (max-width:800px) {
  .swiperContent {
    transform: scale(.8) !important;
    bottom: 1rem !important
  }

  .swiper-pagination-bullets {
    bottom: 2.4rem !important
  }

  .bottom {
    display: block !important
  }
}

@media (min-width:800px) and (max-width:1280px) {
  #app {
    height: 100%;
    background: #060f12 url(../static/bg.99257788.jpg) no-repeat center 0;
    background-size: 100% auto
  }

  #app .downAndGoApp {
    display: none
  }

  #app .downPcApp {
    display: block;
    width: 80%;
    margin-left: 0;
    position: fixed;
    left: 100px;
    right: 100px
  }

  #app .swiper-button-prev {
    background: url() no-repeat;
    background-size: 100% auto;
    left: 24px
  }

  #app .swiper-button-next,
  #app .swiper-button-prev {
    display: block;
    width: 54px;
    height: 80px;
    top: 400px;
    transform: scale(.6)
  }

  #app .swiper-button-next {
    background: url() no-repeat;
    background-size: 100% auto;
    left: 500px
  }

  #app .swiper-button-disabled {
    display: none
  }

  #app .swipers .swiper-container .swiper-pagination {
    width: 528px;
    bottom: 40px;
    padding-left: 24px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide {
    position: relative
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent {
    width: 528px;
    height: 408px;
    left: 24px;
    top: 180px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle h2 {
    font-size: 24px;
    padding-bottom: 12px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle p {
    color: #ccc;
    font-size: 16px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:first-child {
    width: 132px;
    height: 234px;
    left: 60px;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(2) {
    width: 133px;
    height: 238px;
    left: 122px;
    top: 116px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(3) {
    width: 140px;
    height: 248px;
    left: 202px;
    top: 106px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(4) {
    width: 133px;
    height: 238px;
    left: 282px;
    top: 116px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(5) {
    width: 132px;
    height: 234px;
    left: 342px;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .intro {
    position: absolute;
    width: 288px;
    height: 58px;
    background: url(../static/intro.5b9669f4.png) no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -144px;
    top: 200px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .downBtn {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .frees img {
    width: 122px;
    height: 87px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free1 {
    width: 174px;
    height: 108px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .76rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free2 {
    width: 174px;
    height: 108px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .76rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free3 {
    width: 174px;
    height: 108px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .76rem;
    top: 250px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free4 {
    width: 174px;
    height: 108px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .76rem;
    top: 250px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book {
    position: absolute;
    width: 94px;
    height: 125px;
    left: 50%;
    top: 130px;
    margin-left: -56px;
    border-radius: 3px;
    transform-origin: center 200px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book img {
    width: 94px;
    height: 125px;
    border-radius: 3px;
    box-shadow: 2px 2px 10px #000
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book .bookshadow {
    top: -5px;
    left: 0;
    width: 102px;
    height: 135px;
    background: url() no-repeat;
    background-size: 100% auto
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sorts {
    width: 112px;
    height: 160px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort3 {
    left: 208px;
    top: 170px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort2 {
    left: 143px;
    top: 143px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort1 {
    right: 143px;
    top: 106px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk1 {
    width: 253px;
    height: 50px;
    left: 1.88rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk2 {
    width: 282px;
    height: 55px;
    left: .76rem;
    top: 162px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk3 {
    width: 284px;
    height: 55px;
    left: 1.66rem;
    top: 208px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk4 {
    width: 220px;
    height: 37px;
    right: .54rem;
    top: 252px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk5 {
    width: 204px;
    height: 36px;
    left: .56rem;
    top: 296px
  }
}

@media (min-width:1280px) and (max-width:1440px) {
  #app {
    height: 100%;
    background: #060f12 url(../static/bg.99257788.jpg) no-repeat center 0;
    background-size: 100% auto
  }

  #app .downAndGoApp {
    display: none
  }

  #app .downPcApp {
    display: block
  }

  #app .swipers .swiper-container .swiper-pagination {
    width: 528px;
    left: 50%;
    margin-left: -600px;
    bottom: 70px
  }

  #app .swipers .swiper-container .swiper-button-prev {
    display: block;
    width: 54px;
    height: 80px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -640px;
    top: 400px
  }

  #app .swipers .swiper-container .swiper-button-next {
    display: block;
    width: 54px;
    height: 80px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -64px;
    top: 400px
  }

  #app .swipers .swiper-container .swiper-button-disabled {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide {
    position: relative
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent {
    width: 528px;
    height: 408px;
    left: 50%;
    margin-left: -600px;
    top: 200px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle h2 {
    font-size: 24px;
    padding-bottom: 12px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle p {
    color: #ccc;
    font-size: 16px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:first-child {
    width: 132px;
    height: 234px;
    left: 60px;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(2) {
    width: 133px;
    height: 238px;
    left: 122px;
    top: 116px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(3) {
    width: 140px;
    height: 248px;
    left: 202px;
    top: 106px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(4) {
    width: 133px;
    height: 238px;
    left: 282px;
    top: 116px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(5) {
    width: 132px;
    height: 234px;
    left: 342px;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .intro {
    position: absolute;
    width: 288px;
    height: 58px;
    background: url(../static/intro.5b9669f4.png) no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -144px;
    top: 188px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .downBtn {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .frees img {
    width: 122px;
    height: 87px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free1 {
    width: 174px;
    height: 108px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .76rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free2 {
    width: 174px;
    height: 108px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .76rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free3 {
    width: 174px;
    height: 108px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .76rem;
    top: 250px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free4 {
    width: 174px;
    height: 108px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .76rem;
    top: 250px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book {
    position: absolute;
    width: 112px;
    height: 150px;
    left: 50%;
    top: 120px;
    margin-left: -56px;
    border-radius: 3px;
    transform-origin: center 250px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book img {
    width: 112px;
    height: 150px;
    border-radius: 3px;
    box-shadow: 2px 2px 10px #000
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book .bookshadow {
    top: -5px;
    left: 0;
    width: 122px;
    height: 162px;
    background: url() no-repeat;
    background-size: 100% auto
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sorts {
    width: 112px;
    height: 160px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort3 {
    left: 208px;
    top: 170px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort2 {
    left: 143px;
    top: 143px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort1 {
    right: 143px;
    top: 106px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk1 {
    width: 253px;
    height: 50px;
    left: 1.88rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk2 {
    width: 282px;
    height: 55px;
    left: .76rem;
    top: 162px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk3 {
    width: 284px;
    height: 55px;
    left: 1.66rem;
    top: 208px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk4 {
    width: 220px;
    height: 37px;
    right: .54rem;
    top: 252px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk5 {
    width: 204px;
    height: 36px;
    left: .56rem;
    top: 296px
  }
}

@media (min-width:1441px) and (max-width:1680px) {
  #app {
    height: 100%;
    background: #060f12 url(../static/bg.99257788.jpg) no-repeat center 0;
    background-size: 100% auto
  }

  #app .downAndGoApp {
    display: none
  }

  #app .downPcApp {
    display: block
  }

  #app .swiper-button-prev {
    background: url() no-repeat;
    background-size: 100% auto;
    margin-left: -700px
  }

  #app .swiper-button-next,
  #app .swiper-button-prev {
    display: block;
    width: 54px;
    height: 80px;
    left: 50%;
    top: 600px
  }

  #app .swiper-button-next {
    background: url() no-repeat;
    background-size: 100% auto;
    margin-left: 64px
  }

  #app .swiper-button-disabled {
    display: none
  }

  #app .swipers .swiper-container .swiper-pagination {
    width: 616px;
    left: 50%;
    margin-left: -640px;
    bottom: 60px
  }

  #app .swipers .swiper-container .swiper-button-prev {
    display: block;
    width: 54px;
    height: 80px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -678px;
    top: 480px
  }

  #app .swipers .swiper-container .swiper-button-next {
    display: block;
    width: 54px;
    height: 80px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -38px;
    top: 480px
  }

  #app .swipers .swiper-container .swiper-button-disabled {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide {
    position: relative
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent {
    width: 616px;
    height: 476px;
    top: 260px;
    left: 50%;
    margin-left: -640px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle h2 {
    font-size: 28px;
    padding-bottom: 14px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle p {
    color: #ccc;
    font-size: 18px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:first-child {
    width: 154px;
    height: 273px;
    left: 88px;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(2) {
    width: 155px;
    height: 279px;
    left: 150px;
    top: 118px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(3) {
    width: 164px;
    height: 290px;
    left: 230px;
    top: 112px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(4) {
    width: 155px;
    height: 279px;
    left: 310px;
    top: 116px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(5) {
    width: 154px;
    height: 273px;
    left: 370px;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .intro {
    position: absolute;
    width: 288px;
    height: 58px;
    background: url(../static/intro.5b9669f4.png) no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -144px;
    top: 208px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .downBtn {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .frees img {
    width: 143px;
    height: 102px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free1 {
    width: 202px;
    height: 126px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .9rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free2 {
    width: 202px;
    height: 126px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .9rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free3 {
    width: 202px;
    height: 126px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .9rem;
    top: 268px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free4 {
    width: 202px;
    height: 126px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .9rem;
    top: 268px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book {
    position: absolute;
    width: 130px;
    height: 174px;
    left: 50%;
    top: 120px;
    margin-left: -65px;
    border-radius: 6px;
    transform-origin: center 250px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book img {
    width: 130px;
    height: 173px;
    border-radius: 6px;
    box-shadow: 2px 2px 10px #000
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book .bookshadow {
    top: -5px;
    left: 0;
    width: 140px;
    height: 196px;
    background: url() no-repeat;
    background-size: 100% auto
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sorts {
    width: 130px;
    height: 186px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort3 {
    left: 238px;
    top: 190px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort2 {
    left: 163px;
    top: 153px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort1 {
    right: 163px;
    top: 106px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk1 {
    width: 253px;
    height: 50px;
    left: 1.88rem;
    top: 120px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk2 {
    width: 282px;
    height: 55px;
    left: .76rem;
    top: 162px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk3 {
    width: 284px;
    height: 55px;
    left: 1.66rem;
    top: 208px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk4 {
    width: 220px;
    height: 37px;
    right: .54rem;
    top: 252px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk5 {
    width: 204px;
    height: 36px;
    left: .56rem;
    top: 296px
  }
}

@media (min-width:1680px) and (max-width:1920px) {
  #app {
    height: 100%;
    background: #060f12 url(../static/bg.99257788.jpg) no-repeat center 0;
    background-size: 100% auto
  }

  #app .downAndGoApp {
    display: none
  }

  #app .downPcApp {
    display: block
  }

  #app .swipers .swiper-container .swiper-pagination {
    width: 704px;
    left: 50%;
    margin-left: -640px;
    bottom: 100px
  }

  #app .swipers .swiper-container .swiper-button-prev {
    display: block;
    width: 54px;
    height: 80px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -700px;
    top: 600px
  }

  #app .swipers .swiper-container .swiper-button-next {
    display: block;
    width: 54px;
    height: 80px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: 64px;
    top: 600px
  }

  #app .swipers .swiper-container .swiper-button-disabled {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide {
    position: relative
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent {
    width: 704px;
    height: 544px;
    left: 50%;
    margin-left: -640px;
    top: 245px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle h2 {
    font-size: 40px;
    padding-bottom: 20px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle p {
    color: #ccc;
    font-size: 26px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:first-child {
    width: 219px;
    height: 391px;
    left: 50%;
    margin-left: -242px;
    top: 173px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(2) {
    width: 223px;
    height: 397px;
    left: 50%;
    margin-left: -180px;
    top: 171px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(3) {
    width: 233px;
    height: 414px;
    left: 50%;
    margin-left: -116px;
    top: 162px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(4) {
    width: 223px;
    height: 397px;
    left: 50%;
    margin-left: -44px;
    top: 171px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(5) {
    width: 219px;
    height: 391px;
    left: 50%;
    margin-left: 18px;
    top: 173px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .intro {
    position: absolute;
    width: 480px;
    height: 96px;
    background: url(../static/intro.5b9669f4.png) no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -240px;
    top: 310px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .downBtn {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .frees img {
    width: 204px;
    height: 146px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free1 {
    width: 290px;
    height: 180px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .5rem;
    top: 184px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free2 {
    width: 290px;
    height: 180px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .5rem;
    top: 184px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free3 {
    width: 290px;
    height: 180px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .5rem;
    top: 394px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free4 {
    width: 290px;
    height: 180px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .5rem;
    top: 394px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book {
    position: absolute;
    width: 187px;
    height: 249px;
    left: 50%;
    top: 190px;
    margin-left: -93px;
    border-radius: 6px;
    transform-origin: center 315px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book img {
    width: 187px;
    height: 249px;
    border-radius: 6px;
    box-shadow: 2px 2px 10px #000
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book .bookshadow {
    top: -5px;
    left: 0;
    width: 200px;
    height: 270px;
    background: url() no-repeat;
    background-size: 100% auto
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sorts {
    width: 186px;
    height: 266px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort3 {
    width: 206px;
    height: 296px;
    left: 280px;
    top: 282px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort2 {
    left: 160px;
    top: 240px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort1 {
    left: 390px;
    top: 175px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk1 {
    width: 422px;
    height: 83px;
    left: 1.88rem;
    top: 191px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk2 {
    width: 470px;
    height: 91px;
    left: .76rem;
    top: 265px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk3 {
    width: 474px;
    height: 91px;
    left: 1.66rem;
    top: 348px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk4 {
    width: 367px;
    height: 61px;
    right: .84rem;
    top: 421px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk5 {
    width: 340px;
    height: 61px;
    left: .56rem;
    top: 500px
  }
}

@media (min-width:1921px) and (max-width:2560px) {
  #app {
    height: 100%;
    background: #060f12 url(../static/bg.99257788.jpg) no-repeat center 0;
    background-size: 100% auto
  }

  #app .downAndGoApp {
    display: none
  }

  #app .downPcApp {
    display: block
  }

  #app .swipers .swiper-container .swiper-pagination {
    width: 704px;
    padding-left: 20%;
    bottom: 160px
  }

  #app .swipers .swiper-container .points {
    width: 704px;
    margin-left: 20%;
    bottom: 160px;
    position: absolute;
    left: 0;
    height: 80px;
    top: 600px
  }

  #app .swipers .swiper-container .points .swiper-button-prev {
    display: block;
    width: 54px;
    height: 80px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: -60px
  }

  #app .swipers .swiper-container .points .swiper-button-next {
    display: block;
    width: 54px;
    height: 80px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: -60px
  }

  #app .swipers .swiper-container .points .swiper-button-disabled {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide {
    position: relative
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent {
    width: 704px;
    height: 544px;
    left: 20%;
    top: 300px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle h2 {
    font-size: 40px;
    padding-bottom: 20px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .tabTitle p {
    color: #ccc;
    font-size: 26px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:first-child {
    width: 219px;
    height: 391px;
    left: 50%;
    margin-left: -242px;
    top: 173px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(2) {
    width: 223px;
    height: 397px;
    left: 50%;
    margin-left: -180px;
    top: 171px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(3) {
    width: 233px;
    height: 414px;
    left: 50%;
    margin-left: -116px;
    top: 162px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(4) {
    width: 223px;
    height: 397px;
    left: 50%;
    margin-left: -44px;
    top: 171px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .readBook img:nth-child(5) {
    width: 219px;
    height: 391px;
    left: 50%;
    margin-left: 18px;
    top: 173px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .intro {
    position: absolute;
    width: 480px;
    height: 96px;
    background: url(../static/intro.5b9669f4.png) no-repeat;
    background-size: 100% auto;
    left: 50%;
    margin-left: -240px;
    top: 312px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .downBtn {
    display: none
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .frees img {
    width: 204px;
    height: 146px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free1 {
    width: 290px;
    height: 180px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .5rem;
    top: 184px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free2 {
    width: 290px;
    height: 180px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .5rem;
    top: 184px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free3 {
    width: 290px;
    height: 180px;
    background: url() no-repeat;
    background-size: 100% auto;
    left: .5rem;
    top: 394px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .free4 {
    width: 290px;
    height: 180px;
    background: url() no-repeat;
    background-size: 100% auto;
    right: .5rem;
    top: 394px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book {
    position: absolute;
    width: 187px;
    height: 249px;
    left: 50%;
    top: 190px;
    margin-left: -93px;
    border-radius: 6px;
    transform-origin: center 315px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book img {
    width: 187px;
    height: 249px;
    border-radius: 6px;
    box-shadow: 2px 2px 10px #000
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .book .bookshadow {
    top: -5px;
    left: 0;
    width: 200px;
    height: 270px;
    background: url() no-repeat;
    background-size: 100% auto
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sorts {
    width: 186px;
    height: 266px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort3 {
    width: 206px;
    height: 296px;
    left: 280px;
    top: 282px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort2 {
    left: 160px;
    top: 240px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .sort1 {
    left: 390px;
    top: 175px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk1 {
    width: 422px;
    height: 83px;
    left: 1.88rem;
    top: 191px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk2 {
    width: 470px;
    height: 91px;
    left: .76rem;
    top: 265px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk3 {
    width: 474px;
    height: 91px;
    left: 1.66rem;
    top: 348px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk4 {
    width: 367px;
    height: 61px;
    right: .84rem;
    top: 421px
  }

  #app .swipers .swiper-container .swiper-wrapper .swiper-slide .swiperContent .talk5 {
    width: 340px;
    height: 61px;
    left: .56rem;
    top: 500px
  }
}